<template>
  <div class="my_vue_cropper">
    <div class="mask" v-if="isShowMask">
      <VueCropper
        :img="img"
        autoCrop
        autoCropWidth="120"
        autoCropHeight="120"
        fixed
        ref="cropper"
      ></VueCropper>
      <van-button type="primary" class="confirm" @click="crop">确定</van-button>
      <van-button type="primary" class="cancel" @click="cancel">
        取消
      </van-button>
    </div>
  </div>
</template>

<script>
import { VueCropper } from 'vue-cropper'
export default {
  name: 'myvuecropper',
  props: {
    img: String
  },
  data() {
    return {
      isShowMask: true
    }
  },
  methods: {
    crop() {
      this.$refs.cropper.getCropBlob(this.$listeners.getCropperBlob)
    },
    cancel() {
      this.$listeners.cancelCropper()
    }
  },

  components: {
    VueCropper
  }
}
</script>

<style scoped lang="less">
.my_vue_cropper {
  height: 100%;
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    .confirm,
    .cancel {
      position: absolute;
      bottom: 0;
    }
    .confirm {
      left: 0;
    }
    .cancel {
      right: 0;
    }
  }
}
</style>
